<!DOCTYPE html>
<html manifest="iur.manifest">
    <head>
        <meta charset="UTF-8" />
        <title>iUR &beta;</title>
        <style type="text/css" media="screen">@import "/jqt/jqtouch/jqtouch.css";</style>
        <style type="text/css" media="screen">@import "/jqt/themes/jqt/theme.css";</style>
        <style type="text/css" media="screen">@import "/jqt/extensions/jqt.bars/jqt.bars.css";</style>
        <style type="text/css" media="screen">@import "/jqt/extensions/jqt.bars/themes/jqt/theme.css";</style>
        <style type="text/css" media="screen">@import "/jqt/extensions/jqt.listIndex/jqt.listIndex.css";</style>
        <style type="text/css" media="screen">@import "/css/iur.css";</style>
        <script src="/jqt/jqtouch/jquery-1.5.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/jqt/jqtouch/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
        <script src="/jqt/extensions/jqt.bars/jqt.bars.js" type="application/x-javascript" charset="utf-8"></script>
        <script src="/jqt/extensions/jqt.listIndex/jqt.listIndex.js" type="application/x-javascript" charset="utf-8"></script>
<!--        <script src="/jqt/extensions/jqt.offline.js" type="application/x-javascript" charset="utf-8"></script>-->
        <script src="/js/jquery.timer.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/iur.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	
	<!-- tabbar -->
	<div id="tabbar">
		<div>
		    <ul>
		      <li>
		        <a id='goToPlaylists' href="#playlistList" mask="icons/heart_24.png" mask2x="icons/heart_48.png">
		          <strong>Playlists</strong>
		        </a>
		      </li>
		      <li>
		        <a id='goToPlayers' href="#playerSelect" mask="icons/app_24.png" mask2x="icons/app_48.png">
		          <strong>Players</strong>
		        </a>
		      </li>
		      <li>
		        <a id='goToAlbums' href="#albumList" mask="icons/book_24.png" mask2x="icons/book_48.png">
		          <strong>Albums</strong>
		        </a>
		      </li>
		    </ul>
	    </div>
	</div>

	<div id="jqt">
	    <div id="playerSelect">
	        <div class="toolbar">
	            <h1>Select Player</h1>
	            <a href="#playerControls" class="button forward">Now<br/>Playing</a>
	        </div>
	        <ul id="players-result" class="edit rounded">
	        </ul>
	    </div>
	    <div id="playerControls" class="hide_tabbar">
	        <div class="toolbar">
	            <a id="backButton" href="#" class="back">Back</a>
	            <h1 id="currentSong">Player selection unsuccessful. Please go back and retry.</h1>
	        </div>
	        <div id="upperControls" class="upperControls">
		        <div id="seek">
		        	<div>
		                <img src="/icons/video_rewind_24.png" rel="Backward" class="control" />
		                Seek
		                <img src="/icons/video_forward_24.png" rel="Forward" class="control" />
		            </div>
		        </div>      
		        <div id="random">
		        	<span class="toggle"><input id="randomToggle" type="checkbox" />
		        </div>   
	        </div>
	        <div id="coverart">
	       		<img id="coverImage"/>
	        </div>
	        <div id="lowerButtons" class="overlay">
		        <div id="playback">
		        	<div>
		                <img src="/icons/video_previous_48.png" rel="prev" class="control" />
		                <img src="/icons/video_play_48.png" rel="togglePlaying" class="control"/>
		                <img src="/icons/video_next_48.png" rel="next" class="control" />
		            </div>
		        </div>
		        <div id="volume">
		        	<div>
		                <img src="/icons/volume_down_24.png" rel="Down" class="control" />
		                <img src="/icons/volume_up_24.png" rel="Up" class="control" />
		            </div>
		        </div>       
	        </div>

	    </div>
	    <div id="albumList" class="current">
	        <div class="toolbar">
	            <h1>Albums</h1>
	            <a href="#playerControls" class="button forward">Now<br/>Playing</a>
	        </div>
	        <div class="s-scrollwrapper indexed">
	        	<div>
	        	   <ul class="rounded">			            
			            <li><input type="search" name="album-name-text" placeholder="Album name starts with..." id="album-name-text" /></li>
			        </ul>		        	        
			        <ul class="edgetoedge" id="album-name-results">
			        </ul>
			    </div>
		    </div>
	    </div>
	    <div id="songList">
	        <div class="toolbar">
	            <a href="#albumList" class="back">Albums</a>
	            <h1>Songs</h1>
	            <a href="#playerControls" class="button forward">Now<br/>Playing</a>
	        </div>
	        <div class="s-scrollwrapper">
		        <ul class="edgetoedge" id="songs-in-album">
		        </ul>
	        </div>
	    </div>
	    <div id="playlistList">
	        <div class="toolbar">
	        	<h1>Playlists</h1>
	            <a href="#playerControls" class="button forward">Now<br/>Playing</a>
	        </div>
	        <ul class="edgetoedge" id="playlist-results">
	        </ul>
	    </div>
    </div>
	</body>
</html>
		